<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Chasing the Cargo Ship :: GameSquad</title>
		<meta charset="utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap.css">
		<link rel="stylesheet" type="text/css" href="css/bootstrap/jumbotron-narrow.css">
		<link rel="stylesheet" type="text/css" href="css/styles.css">
	</head>
	<body>
		<div class="container" style="max-width: 1000px;">
			<div class="header">
				<nav>
					<ul class="nav nav-pills pull-right">
						<li class="game-actions hidden">
							<button type="button" class="btn btn-primary navbar-btn" data-action="save">Guardar partida</button>
						</li>
						<li class="game-actions hidden">
							<button type="button" class="btn btn-primary navbar-btn" data-action="showabandon">Abandonar partida</button>
						</li>
						<li>
							<button type="button" class="btn btn-primary hidden" data-action="restart">Reiniciar juego</button>
						</li>
						<li role="presentation"><a href="javascript:;" data-action="show-help">Ayuda</a></li>
					</ul>
				</nav>
				<h3 class="text-muted">GameSquad</h3>
			</div>
			
			<div id="menu-container">
				<div class="jumbotron">
					<!-- h1>Menú Principal</h1 -->
					<h1><img src="assets/title2.png" alt="Chasing the Cargo Ship :: GameSquad" title="Chasing the Cargo Ship :: GameSquad"></h1>
				</div>

				<div class="row marketing">
					<div class="col-lg-12 step step-1">
						<div id="actions" class="btn-group-vertical col-lg-12" role="group">
							<ul class="list-unstyled padded text-center">
								<li><button type="button" class="btn-lg btn-primary" data-action="showstep" data-target="create">Nueva partida</button></li>
								<li><button type="button" class="btn-lg btn-primary" data-action="showstep" data-target="join" data-method="getUnirsePartida">Unirse a una partida en curso</button></li>
								<li><button type="button" class="btn-lg btn-primary" data-action="showstep" data-target="load" data-method="getCargarPartida">Cargar partida</button></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		
			<div id="game-wrapper" class="hidden">
				<div id="game-container"></div>
				<!-- span class="glyphicon glyphicon-volume-off" data-volume="off"></span>
				<span class="glyphicon glyphicon-volume-up hidden" data-volume="on"></span-->
				<div class="winner-banner hidden"></div>
			</div>

			<!-- footer class="footer">
				<p>© GameSquad 2015</p>
			</footer-->

    	</div>
	</body>
	<!-- Templates for the menu -->
	<div id="tpl-wrapper">
		<script id="create-tpl" type="underscore/template" data-action="create">
			<div class="col-lg-12 step step-2">
				<h2>Nueva partida</h2>
				<hr>
				<div id="create" class="btn-group-vertical col-lg-12" role="group">
					<form class="form-horizontal" action="javascript:;" method="post" data-action="create">
						<legend>Ingrese el nombre de partida</legend>
						<div class="form-group">
						    <label for="name" class="col-sm-2 control-label">Nombre de partida</label>
						    <div class="col-sm-10">
						      <input type="text" class="form-control" id="nombrePartida" name="nombrePartida" placeholder="Nombre">
						    </div>
						</div>
						<div class="form-group">
						    <label for="name" class="col-sm-2 control-label">Tipo de Escenario</label>
						    <div class="col-sm-10">
						    	<select name="tipoMapa" id="">
						    		<option value="ISLAS">Islas</option>
						    		<option value="MARABIERTO">Mar Abierto</option>
						    	</select>
						    </div>
						</div>
						<div class="actions-modal">
							<input type="hidden" id="rolPartida" name="rolPartida" value="BARCOCARGUERO">
							<button type="submit" class="btn-sm btn-success">Crear</button>
							<button type="button" class="btn-sm btn-error" data-action="back">Volver</button>
						</div>
					</form>
				</div>
			</div>
		</script>
		<script id="join-tpl" type="underscore/template" data-action="join">
			<div class="col-lg-12 step step-2">
				<h2>Unirse a una partida</h2>
				<hr>
				<div id="join" class="btn-group-vertical col-lg-12" role="group">
					<form class="form-horizontal" action="javascript:;" method="post" data-action="join">
						<legend>Seleccione la partida a la que desea unirse</legend>
						<div class="form-group">
							<% if(partidas && partidas.length) { %>
							    <ul class="list-unstyled text-center">
								    <% _.each(partidas, function(partida) { %>
								    	<li>
											<input type="radio" name="nombrePartida" value="&quot;nombrePartida&quot;:&quot;<%= partida.nombrePartida %>&quot;,&quot;rolPartida&quot;:&quot;PIRATA&quot;,&quot;tipoMapa&quot;:&quot;<%= partida.tipoMapa %>&quot;,&quot;status&quot;:&quot;<%= partida.status %>&quot;"/>
											<label class="control-label" for="nombrePartida"><%= unescape(partida.nombrePartida) %></label>
										</li>
								    <% }) %>
								</ul>
							<% } else { %>
								<p>No se encontraron partidas a las que unirse.</p>
							<% } %>
						</div>
						<div class="actions-modal">
							<% if(partidas && partidas.length) { %>
								<button type="submit" class="btn-sm btn-success">Unirse</button>
							<% } %>
							<button type="button" class="btn-sm btn-error" data-action="back">Volver</button>
							<input type="hidden" name="rolPartida" value="PIRATA">
						</div>
					</form>
				</div>
			</div>
		</script>
		<script id="load-tpl" type="underscore/template" data-action="load">
			<div class="col-lg-12 step step-2">
				<h2>Cargar una partida</h2>
				<hr>
				<div id="load" class="btn-group-vertical col-lg-12" role="group">
					<form class="form-horizontal" action="javascript:;" method="post" data-action="load">
						<legend>Seleccione la partida que desea cargar</legend>
						<div class="form-group">
							<% if(partidas && partidas.length) { %>
							    <ul class="list-unstyled text-center">
									<% _.each(partidas, function(partida) { %>
								    	<li>
												<input type="radio" name="nombrePartida" value="&quot;nombrePartida&quot;:&quot;<%= partida.nombrePartida %>&quot;,&quot;rolPartida&quot;:&quot;BARCOCARGUERO&quot;,&quot;tipoMapa&quot;:&quot;<%= partida.tipoMapa %>&quot;,&quot;status&quot;:&quot;<%= partida.status %>&quot;"/>
												<label class="control-label" for="nombrePartida"><%= unescape(partida.nombrePartida) %></label>
											</li>
								    <% }) %>
								</ul>
							<% } else { %>
								<p>No se encontraron partidas guardadas.</p>
							<% } %>
						</div>
						<div class="actions-modal">
							<% if(partidas && partidas.length) { %>
								<button type="submit" class="btn-sm btn-success" data-action="load">Cargar</button>
							<% } %>
							<button type="button" class="btn-sm btn-error" data-action="back">Volver</button>
							<input type="hidden" name="rolPartida" value="BARCOCARGUERO">
						</div>
					</form>
				</div>
			</div>
		</script>
		<script id="abandon-tpl" type="underscore/template" data-action="abandon">
			<div class="col-lg-12 step step-2">
				<h2>¿Está seguro que desea abandonar la partida?</h2>
				<p>En caso de confirmar, tenga en cuenta que su contrincante será el ganador de la partida.</partida>
				<hr>
				<form class="form-horizontal" action="javascript:;" method="post" data-action="confirm-abandon">
					<button type="submit" class="btn-sm btn-success">Abandonar</button>
					<button type="button" class="btn-sm btn-error" data-action="back">Continuar</button>
				</form>
			</div>
		</script>
		<script id="waiting-tpl" type="underscore/template">
			<div class="col-lg-12 step step-2">
				<h2>Esperando contrincante</h2>
				<hr>
				<form action="javascript:;" data-action="confirm-abandon" data-partida="<%= partida %>">
					<button type="submit" class="btn-sm btn-error">Cancelar</button>
				</form>
			</div>
		</script>
		<script id="error-tpl" type="underscore/template">
			<div class="error">
				<%= message %>
			</div>
		</script>
		<script id="help-tpl" type="underscore/template">
			<div class="col-lg-12 container-fluid" style="height: 500px;">
				<h2>Ayuda en línea</h2>
				<h4>Menú de opciones principales</h4>
				<ul class="list-unstyled">
					<li><b>Nueva partida</b>: Permite crear una nueva partida.</li>
					<li><b>Unirse a una partida en curso</b>: Permite unirse a una partida ya creada.</li>
					<li><b>Cargar partida</b>: Permite cargar una partida previamente cargada.</li>
				</ul>
				<h4>Opciones disponibles para una partida en curso</h4>
				<ul class="list-unstyled">
					<li><b>Guardar partida</b>: Permite guardar todos los datos de la partida.</li>
					<li><b>Abandonar partida</b>: Se abandona la partida y se da por ganador al contrincante del jugador que abandonó.</li>
				</ul>
				<h4>Teclas de movimientos y disparo</h4>
				<div class="col-lg-12">
					<div class="col-lg-6">
						<span class="glyphicon glyphicon-arrow-left"></span>
					</div>
					<div class="col-lg-6">
						Virar hacia la izquierda
					</div>
				</div>
				<div class="col-lg-12">
					<div class="col-lg-6">
						<span class="glyphicon glyphicon-arrow-up"></span>
					</div>
					<div class="col-lg-6">
						Mover hacia adelante
					</div>
				</div>
				<div class="col-lg-12">
					<div class="col-lg-6">
						<span class="glyphicon glyphicon-arrow-right"></span>
					</div>
					<div class="col-lg-6">
						Virar hacia la derecha
					</div>
				</div>
				<div class="col-lg-12">
					<div class="col-lg-6">
						<span class="glyphicon glyphicon-arrow-down"></span>
					</div>
					<div class="col-lg-6">
						Mover hacia atrás (sólo para Carguero)
					</div>
				</div>
				<div class="col-lg-12">
					<div class="col-lg-6">
						<img src="assets/spacebar.png"/>
					</div>
					<div class="col-lg-6">
						Disparar
					</div>
				</div>
				<div class="col-lg-12">
					<div class="col-lg-6">
						<img src="assets/tabbutton.png"/>
					</div>
					<div class="col-lg-6">
						Cambiar de lancha (sólo para Pirata)
					</div>
				</div>
			</div>
		</script>
	</div>
	<script type="text/javascript" src="js/lib/underscore-min.js"></script>
	<script type="text/javascript" src="js/lib/phaser.min.js"></script>
	<script type="text/javascript" src="js/lib/jquery-2.1.3.js"></script>
	<script type="text/javascript" src="js/lib/jquery.pubsub.js"></script>
	<script type="text/javascript" src="js/lib/jquery.simplemodal.1.4.4.min.js"></script>
	<script type="text/javascript" src="js/lib/jquery-serializeForm.min.js"></script>
	<script type="text/javascript" src="js/src/modules/Config/Config.General.js"></script>
	<script type="text/javascript" src="js/src/modules/Config/Config.Text.js"></script>
	<script type="text/javascript" src="js/src/modules/Config/Config.Map.js"></script>
	<script type="text/javascript" src="js/src/modules/Config/Config.Player.js"></script>
	<script type="text/javascript" src="js/src/modules/Config/Config.Boat.js"></script>
	<script type="text/javascript" src="js/src/modules/Util/Util.js"></script>
	<script type="text/javascript" src="js/src/modules/Util/SocketManager.Methods.js"></script>
	<script type="text/javascript" src="js/src/modules/Util/SocketManager.js"></script>
	<script type="text/javascript" src="js/src/modules/Util/Gateway.Methods.js"></script>
	<script type="text/javascript" src="js/src/modules/Util/Gateway.js"></script>
	<script type="text/javascript" src="js/src/modules/Menu/Templates.js"></script>
	<script type="text/javascript" src="js/src/modules/Game/Matches.js"></script>
	<script type="text/javascript" src="js/src/modules/Game/Assets.js"></script>
	<script type="text/javascript" src="js/src/modules/Game/Boat.js"></script>
	<script type="text/javascript" src="js/src/modules/Game/Player.js"></script>
	<script type="text/javascript" src="js/src/modules/Game/Engine.Events.js"></script>
	<script type="text/javascript" src="js/src/modules/Game/Engine.js"></script>
	<script type="text/javascript" src="js/src/modules/Game/Game.Map.js"></script>
	<script type="text/javascript" src="js/src/modules/Game/Game.Collisions.js"></script>
	<script type="text/javascript" src="js/src/modules/Game/Game.js"></script>
	<script type="text/javascript" src="js/src/modules/Menu/Menu.Actions.js"></script>
	<script type="text/javascript" src="js/src/modules/Menu/Menu.Validation.js"></script>
	<script type="text/javascript" src="js/src/modules/Menu/Menu.View.js"></script>
	<script type="text/javascript" src="js/src/modules/Menu/Menu.js"></script>
	<!-- script type="text/javascript" src="js/dist/Game.min.js"></script -->
	<script type="text/javascript">
		(function() {

			Menu.init();
			//Game.init();

		})();
	</script>
</html>